<template>
	<view class="my-page">
		<u-navbar :title="title" bgColor="rgba(255,255,255,0.0)" :auto-back="true" :placeholder="true"></u-navbar>
		<view class="content" v-if="type == 1">
			<view class="title">
				账户名称
			</view>
			<view class="text">
				<u--input placeholder="请输入自定义账户名称" border="none" v-model="name"></u--input>
			</view>
			<view class="title">
				支付宝昵称
			</view>
			<view class="text">
				<u--input placeholder="请输入支付宝昵称" border="none" v-model="alipay_nikename"></u--input>
			</view>
			<view class="title">
				支付宝账户
			</view>
			<view class="text">
				<u--input placeholder="请输入支付宝账户" border="none" v-model="alipay_account"></u--input>
			</view>
			<view class="title">
				实名姓名
			</view>
			<view class="text">
				<u--input placeholder="请输入实名姓名" border="none" v-model="alipay_name"></u--input>
			</view>
			<view class="title">
				验证码
			</view>
			<view class="text">
				<u-input placeholder="请输入谷歌验证码或手机验证码" border="none" v-model="alipay_code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success"
							color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"
							size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="title">
				支付宝收款码
			</view>
			<view class="code" @click="goimgup">
				<u-icon name="plus" v-if="alipay_url == ''" color="#999" size="50"></u-icon>
				<image v-else :src="alipay_url" mode=""></image>
			</view>
			<view class="pay-btn">
				<u-button type="primary" text="提交" shape="circle" @click="goup"
					color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"></u-button>
			</view>
		</view>
		<view class="content" v-if="type == 2">
			<view class="title">
				账户名称
			</view>
			<view class="text">
				<u--input placeholder="请输入自定义账户名称" border="none" v-model="name"></u--input>
			</view>
			<view class="title">
				微信昵称
			</view>
			<view class="text">
				<u--input placeholder="请输入微信昵称" border="none" v-model="alipay_nikename"></u--input>
			</view>
			<view class="title">
				实名姓名
			</view>
			<view class="text">
				<u--input placeholder="请输入实名姓名" border="none" v-model="alipay_name"></u--input>
			</view>
			<view class="title">
				验证码
			</view>
			<view class="text">
				<u-input placeholder="请输入谷歌验证码或手机验证码" type="number" border="none" maxlength="6" v-model="alipay_code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success"
							color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"
							size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="title">
				微信收款码
			</view>
			<view class="code" @click="goimgup">
				<u-icon name="plus" v-if="alipay_url == ''" color="#999" size="50"></u-icon>
				<image v-else :src="alipay_url" mode=""></image>
			</view>
			<view class="pay-btn">
				<u-button type="primary" text="提交" shape="circle" @click="goup"
					color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"></u-button>
			</view>
		</view>
		<view class="content" v-if="type == 3">
			<view class="title">
				账户名称
			</view>
			<view class="text">
				<u--input placeholder="请输入自定义账户名称" border="none" v-model="name"></u--input>
			</view>
			<view class="title">
				卡号
			</view>
			<view class="text">
				<u--input placeholder="请输入银行卡号" border="none" v-model="alipay_card"></u--input>
			</view>
			<view class="title">
				开户行
			</view>
			<view class="text">
				<u--input placeholder="请输入开户行" border="none" v-model="alipay_openBank"></u--input>
			</view>
			<view class="title">
				实名姓名
			</view>
			<view class="text">
				<u--input placeholder="请输入实名姓名" border="none" v-model="alipay_name"></u--input>
			</view>
			<view class="title">
				验证码
			</view>
			<view class="text">
				<u-input placeholder="请输入谷歌验证码或手机验证码" type="number" border="none" maxlength="6" v-model="alipay_code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success"
							color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"
							size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="pay-btn" style="margin-top: 100rpx;">
				<u-button type="primary" text="提交" shape="circle" @click="goup"
					color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"></u-button>
			</view>
		</view>
		<view class="content" v-if="type == 4">
			<view class="title">
				账户名称
			</view>
			<view class="text">
				<u--input placeholder="请输入自定义账户名称" border="none" v-model="name"></u--input>
			</view>
			<view class="title">
				USDT 地址
			</view>
			<view class="text">
				<u--input placeholder="请输入USDT 地址" border="none" v-model="usdturl"></u--input>
			</view>
			<view class="title">
				转账网络
			</view>
			<view class="text">
				TRC-20
			</view>
			<view class="title">
				验证码
			</view>
			<view class="text">
				<u-input placeholder="请输入谷歌验证码或手机验证码" type="number" border="none" maxlength="6" v-model="alipay_code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success"
							color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"
							size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="pay-btn" style="margin-top: 100rpx;">
				<u-button type="primary" text="提交" shape="circle" @click="goup"
					color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				type: 0,
				usdturl:'',
				alipay_nikename: '',
				alipay_account: '',
				alipay_name: '',
				alipay_code: '',
				alipay_url: '',
				alipay_card: '',
				alipay_openBank: '',
				name:'',
				title: ''
			}
		},
		onLoad(e) {
			this.type = e.type
			if (this.type == 1) {
				this.title = '绑定支付宝收款'
			}
			if (this.type == 2) {
				this.title = '绑定微信收款'
			}
			if (this.type == 3) {
				this.title = '绑定银行卡收款'
			}
			if (this.type == 4) {
				this.title = '绑定USDT收款'
			}
		},
		methods: {
			goimgup() {
				let app = this
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						const result = await app.uploadFilePromise(res.tempFilePaths[0])
						uni.hideLoading()
						app.alipay_url = result
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://cx.iirl.top/api/profile/upload',
						filePath: url,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if (info.code == 200) {
								setTimeout(() => {
									resolve(info.msg)
								}, 1000)
							} else {
								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}
						}
					});
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			goup() {
				if (this.type == 1) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入自定义账户名称',
							icon: 'none'
						})
						return
					}
					if (this.alipay_nikename == '') {
						uni.showToast({
							title: '请输入支付宝昵称',
							icon: 'none'
						})
						return
					}
					if (this.alipay_account == '') {
						uni.showToast({
							title: '请输入支付宝账户',
							icon: 'none'
						})
						return
					}
					if (this.alipay_name == '') {
						uni.showToast({
							title: '请输入实名姓名',
							icon: 'none'
						})
						return
					}
					if (this.alipay_code == '') {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return
					}
					if (this.alipay_url == '') {
						uni.showToast({
							title: '请上传支付宝收款码',
							icon: 'none'
						})
						return
					}
					let params = {
						qrcode: this.alipay_url,
						username: this.alipay_name,
						payNike: this.alipay_nikename,
						payAccount: this.alipay_account,
						googleSms: this.alipay_code,
						phoneSms: this.alipay_code,
						payName:this.name
					}
					this.$Request({
						method: 'POST',
						url: '/api/member/payoutInfo/zfb',
						data: params,
						ismsg: true,
					}).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
				if (this.type == 2) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入自定义账户名称',
							icon: 'none'
						})
						return
					}
					if (this.alipay_nikename == '') {
						uni.showToast({
							title: '请输入微信昵称',
							icon: 'none'
						})
						return
					}
					if (this.alipay_name == '') {
						uni.showToast({
							title: '请输入实名姓名',
							icon: 'none'
						})
						return
					}
					if (this.alipay_code == '') {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return
					}
					if (this.alipay_url == '') {
						uni.showToast({
							title: '请上传微信收款码',
							icon: 'none'
						})
						return
					}
					let params = {
						qrcode: this.alipay_url,
						username: this.alipay_name,
						wxNike:this.alipay_nikename,
						googleSms: this.alipay_code,
						phoneSms: this.alipay_code,
						payName:this.name
					}
					this.$Request({
						method: 'POST',
						url: '/api/member/payoutInfo/wx',
						data: params,
						ismsg: true,
					}).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
				if (this.type == 3) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入自定义账户名称',
							icon: 'none'
						})
						return
					}
					if (this.alipay_card == '') {
						uni.showToast({
							title: '请输入银行卡号',
							icon: 'none'
						})
						return
					}
					if (this.alipay_openBank == '') {
						uni.showToast({
							title: '请输入开户行',
							icon: 'none'
						})
						return
					}
					if (this.alipay_name == '') {
						uni.showToast({
							title: '请输入实名姓名',
							icon: 'none'
						})
						return
					}
					if (this.alipay_code == '') {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return
					}
					let params = {
						card: this.alipay_card,
						username: this.alipay_name,
						openBank: this.alipay_openBank,
						googleSms: this.alipay_code,
						phoneSms: this.alipay_code,
						payName:this.name
					}
					this.$Request({
						method: 'POST',
						url: '/api/member/payoutInfo/bank',
						data: params,
						ismsg: true,
					}).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
				if (this.type == 4) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入自定义账户名称',
							icon: 'none'
						})
						return
					}
					if (this.usdturl == '') {
						uni.showToast({
							title: '请输入usdt地址',
							icon: 'none'
						})
						return
					}
					let params = {
						url: this.usdturl,
						netWork: 'TRC-20',
						googleSms: this.alipay_code,
						phoneSms: this.alipay_code,
						payName:this.name
					}
					this.$Request({
						method: 'POST',
						url: '/api/member/payoutInfo/usdt',
						data: params,
						ismsg: true,
					}).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.content {
			padding: 30rpx;

			.pay-btn {
				margin-top: 30rpx;
			}

			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.text {
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
				padding: 20rpx 30rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
			}

			.code {
				width: 100%;
				height: 600rpx;
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
				margin-top: 30rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;

				image {
					width: 500rpx;
					height: 500rpx;
					margin-top: 5%;
				}
			}
		}
	}
</style>